Web Designer Wall
Tutorials

CSS3 Gradient Buttons

By Aigars Silkalns 3 min read

Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

button states

What Is So Cool About These Buttons?

  • Pure CSS: no image or Javascript is used.
  • The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
  • Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
  • It has three button states: normal, hover, and active.
  • It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
  • Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).

Preview

The image below shows how the button will display in different browsers.

preview

Button States

  • normal state = gradient with border and shadow styles.
  • hover = darker gradient
  • active = gradient is reversed, 1px down, and darker font color as well.

button states

General Styles For The Button

The following code is the general styles for the .button class. I use em value in the padding and border-radius property to make it scalable base on the font-size. To adjust the rounded corners and button size, simply change the border-radius, font-size and padding values. For example: I can make a smaller button by decreasing the font-size and padding values (see demo).

For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3.

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

button general styles

Color Gradient Styles

The code below is the CSS styling for the orange button. The first background line is a fallback for the non-CSS3 browsers, the second line is for Webkit browsers, the third line is for Firefox, and the last line is a gradient filter that is only read by Internet Explorer.

For more details on CSS gradient, read my article Cross-Browser CSS Gradient. 

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

button general styles

How To Use My Buttons?

Lets say you like the blue button and want to use it on your page:

  • First, copy the .button and .blue CSS (view demo source code).
  • Then, add class="button blue" to the HTML element where you want the button to be (eg. <a href="#" class="button blue">Button</a>). The CSS classes can be applied to any element such as link, p, span, div, input, button, etc.

applying

Keep reading

Tutorials

Installing WordPress Locally

This is the first chapter of the Complete WordPress Theme Guide series. In this chapter, you will learn how to install WordPress…

2 min read

Tutorials

Word-Wrap: Force Text to Wrap

Today I’m going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text…

1 min read

392 comments from the archive

  2. Wow, awesome buttons. I’ll use them instantly for some of my projects – thanks!

  3. Very nice tutorial! Great job!

    Martijn: With all do respect, your solution isn’t even comparable with this.
    In fact, is’t been commonly used for over 3-4 years and is found all over the web, (i.e use of .png images and background-position). This solutions uses ONLY css and no images which decreases number of requests to the server and the download-time in the long run :-)

  4. What is the name of this handwriten typeface you use in your articles? I’d appreciate if you could tell me! Thx! ^^

  5. Quite simple, nothing new.

    But it’s good to see another example of CSS3 usage !

  7. Yesterday I made a similar button with CSS3 gradients and and :active state, too, but you hit it! Very cool stuff!

  8. My only qualm with using gradients on buttons at the moment is that you currently lose the -webkit-transition on hover. Unless I’m missing something. It certainly doesn’t work for Safari and Chrome Windows.

    Anyone know when transitions between gradient backgrounds is likely to be in place?

  9. I guess you should add -ms-filter for IE8+

    Beside that, this technique is perfect :)

  11. I’m new to your site and love the content so far! These buttons are great, love the use of all CSS and HTML. Thanks for sharing!

  12. Great tut Nick. I’ve seen a few like this over the last few days, but yours is the neatest by far. Could the same code work to create a circular button I wonder?

  13. Great piece Nic and the #smashingmag tweet could not have come at a better time! I’m revamping a client’s old site – and working on CSS3 buttons this am. Now I have a template to start from! Saved me at least an hour. I’ll credit you on the site.

    Muchas gracias!

  14. Wonderful tutorial, I am so impressed with the progressive enhancement features of CSS3

  18. I love them. It’s such a relief to see things done the way you know they should be. Thanks.

  19. Nice tutorial.

    You might be interested in another example on nice buttons witch CSS3.

  23. Thanks so much for that clear explanation. I’ve used a lot of those techniques before, but I love the idea of making the text darker on the :active state. You learn something new every day!

  24. I’ve been using box-shadow to make buttons, I’ll need to try adding in the gradient effect as well! I’m really loving all the ways CSS3 can replace images. Here’s some social networking icons/buttons I made without any images at all, using CSS3.

  25. This is actually really well done. Thanks for taking the time of clearly outlining the process here. You’ve done well to answer questions before they inevitably arise (cross-browser issues). I’ve got a project these babies can go into today.

  27. thats really cool and css3 is looking powerful and good enough to make the web more better. thanks for the share

  29. You can add an inset box-shadow to the active state to really make it feel pressed.

  31. This is an excellent article!! One thing you haven’t covered which readers may find useful are “color stops” which give you more control over the gradient in a very easy way. Both the Webkit and Mozilla engines support color stops.

    Webkit’s implementation is better in my opinion as you can specify where the stop point is e.g. for a 3 step gradient you may do something like this:
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, yellow), color-stop(0.5, orange), color-stop(1.0, red));
    The first parameter in the color-stop attribute is the percentage of distance from start and end points.

    Mozilla’s implementation still provides color stops but you have no control over their placement – e.g.
    background: -moz-linear-gradient(left, yellow, orange, red);

  34. Thanks for the great css tips, & the amazingly clear explanations & diagrams. And especially for helping create more beauty on the web – functional & aesthetic!

  37. @Shane: you can specify where color-stops are in Mozilla, too:
    background-image: -moz-linear-gradient(top,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.2) 40%,
    rgba(255, 255, 255, 0.0) 100%);

  41. anyone has idea why:
    input element in Opera 10.51
    dosent work?
    it hasent got text drop-shadow
    its strange since other button work quite well…

  42. Nice tutorial, the code is clear and easy to understand. Thank you very much for sharing, I’ll use it in my website right now.

  45. While I don’t agree with using Microsoft filters to ape CSS3, you have omitted the declarations for IE8, e.g.:

    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#faa51a’, endColorstr=’#f47a20′)”;

  47. Good stuff.. I’m starting to think pretty soon we won’t need PS any more :)

  49. The technique is great, and you made it really easy to understand and use,
    but what really amazed me was your wonderful choice of colors.

    I don’t think a tutorial can be made any better than what you’ve done here!

    Keep up the good work.

    Mamdouh

  53. Really cute! I’m planning in making my own website and this buttons is perfect! thanks a lot!

  54. This is really cool, I’ll have to book mark it for the next time I’m working on web buttons.

  56. This is very cool indeed, nice way to have more styled up basic buttons on a site without using images — but it’s still very annoying you have to use all the browser specific code. :(

  57. This + ie-css3.htc and you’ve got complete coverage!
    This is great!
    Thanks!

  58. I also agree that this technique is great, and you made it really easy to understand. This is a brilliant tutorial, keeping it simple by using no image or Javascript, and simply using CSS. The gradient adds a nice pop to a simple button, to add a different look to spice up your web design. The button states make it completely user friendly with the hover and active shades. The way you broke it down is brilliant for those just starting out

  64. Another brilliant, well written, well explained, and actually useful tutorial. Love that you don’t ignore cross browser compatibility / degradation as well. Thanks Nick!

  67. This article is one of the best CSS tutorials I´ve ever read! THANKS FOR SHARING THIS!
    (I´m really glad I´ve joined your subscriber´s feed!)
    Rosamunda

  69. Once again, lame IE ruins innovation by not displaying gradients. Man, this could really save a lot of page load time throughout the web if everyone could use css buttons instead of PNGs.

  70. Nice looking buttons… they’re scalable too which is a must for easy updating. Shame about IE but anybody who uses IE doesn’t deserve to see pretty buttons anyway ;)

    Justin – Big Click
    @bigclickstudios

  71. very nice effect. thanks for sharing the great one. a very good tutorial 2010.

  72. Nice buttons. And thanks for the code. This is awesome!
    I will make smth similar for the website I’m working on. Thanks.

  75. Nice bit of CSS here, have just tried it and it works a treat in my decent NON IE browsers.

    Even In IE however it still looks ok and has a nice gradient, just no shadow or rounded corners.

    Cheers for sharing this with us… most appreciated.

  76. Brilliant and wonderful.

    One problem, I am still seeing a ‘double padding’ making the button twice as wide in IE 7. Any thoughts on a fix?

  79. Great, this one will be bookmarked & used!

    Btw: compliments for the wonderful website…

    Pieter

  81. For more compatibility to others browsers. For every property with prefix -moz or -webkit, you may also incluse the prefix “-khtml”.
    Like:
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;

  85. Neat professional buttons! I’ll use them!

    Approx. 20 line of CSS and it looks beautiful.

    Thx for sharing.

    ubuntu admin

  87. Well, I thought I would say that’s great but then it’s a bit common to say that. But really, that’s great!! Thanks for sharing.

  90. Is there a way to get rid of the dotted line around the text when clicking on the button?
    I figured I had to add outline:none to the .button:active, but I see it’s already applied to the .button?

  91. First of all, buttons look great.

    Second, is there a way to get the form elements (input/button) to be the same height as the rest in Firefox (I’m using 3.6.3)? Open the demo in ff to see what I mean.

  92. I like the techniques you’ve outlined here. I’ve used some css3 features in recent projects and like the way rounded corners and such, nicely degrade into simple square boxes in cruddy old IE.

    Thanks for the post.

  94. So useful!
    I will have a try, I must use it for my own portfolio.

    Thx a lot! (:

  96. I know you heard it often… but great work..
    i’m using them now….

    Thanks
    Kees.

  97. Hey, thanks for such a great feature. I’m having trouble implementing it on chrome though. When I type in my button text (ie the text that shows on the button) in upper case, either just the first letter shows up or nothing at all. It works fine in firefox and IE though. I had to revert to lowercase but will really like to use all caps. Help please?

  98. Never mind. Just had to take out the text shadow code. Works in uppercase on chrome now.

  100. Beauty button and great tutorial … thanks for sharing this tip ..

  102. Hey, did you try a Cool Button Designer? I think it is a best web button creator – if you dont have a photoshop or dont know how to use it. You can also apply the CSS to the graphics created in Cool Button Designer. I suggest you to try it, it has bunch of features, and creates a cool looking buttons. Just google for Cool Button Designer.

    Chao.

  105. thanks for the your web site i am not very good comunicate english but very simple use to your web toturials very very thanks .

  109. great tutorial, i never knew you could do that in pure css. It woudl be good to see how it degrades in each browser, or a browser compatability chart?

  110. What if you want an icon-image in a input-button ánd a gradient?
    Impossible right?

  113. thank you for this lovely post is there any way we can hack IE for rounded corners

  114. This is cool, just learning the new ropes of CSS3 so love it.

  115. Very good and interesting Article, but that sucks that Internet Explorer has problems with this button…

  116. Great job! I’ve just tried it and it looks wonderful (^_^)
    Love your website! Using it as a reference :-)
    Cheers

  117. Love it, works great… Mozilla and Chrome it is perfectly fine just IE it is not perfect… but enough for use :)

  119. Great article, cool buttons! Please take a look at my new CSS3Menu, http://css3menu.com/. It can create similar CSS3 buttons, w/o coding. Versions for Mac and Windows are available.
    Thanks!

  120. Nice, but what is the proper CSS3 gradient property once it is all finally supported?

  123. Also, for Opera you can use a box-shadow inset to simulate a gradient on the button. Just set the bg color, set the inset shadow, then declare your gradients. It’s not perfect, but looks better than plain color…

  126. Is the only way to actually submit a form with this technique to use javascript?

  129. Nice, but what is the proper CSS3 gradient property once it is all finally supported?

  136. i still confused with some part…
    may be i must learn more…
    :)
    thanks, nice post
    God Bless u

  139. @ Randall – I just came across this post and I’m seeing the same thing with “double padding” in IE. Did you find a fix?

    Great buttons otherwise!

  144. Nice tutorial! Easy to understand and really useful. Not really touched on CSS3 as most browsers don’t support it, but think this may come in handy. good job

  146. Oh, wow! Thank you so much for this! I’m still learning what you can do with CSS3. I am really happy to find this. It will help save time when designing websites and no longer having to design buttons. Thanks again for this and the other great articles on this site.

  149. Very handy. Thanks for sharing the code and how to please all browsers – even IE.

  150. All of these rounded corner tuts are great and fun to experiment with, but since IE doesn’t support border-radius, they have no real value…

  151. These are really nice looking. Great work! An improvement would be to make all the gradients semitransparent black instead of whatever color the background is. That way, the only thing you have to change to get a different colored button is a single simple hex background color. The black gradient would control the slight darkening on every single one. More flexible, less code.

  153. Very cool and simple. Really appreciated the previews in noncc3 browsers.

  155. Really nice. It’s great what you can do with bare CSS – isn’t it? Actually it would have been a bit better with the use of CSS transitions. Could be like this:

    .blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top, #00adee, #0078a5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');

    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    transition: background 1s linear;
    }

    That gives the background a nice animation effect when its hovered. I think that should be part of a css3 tutorial.

  156. Dreiden, you clearly have no idea. Have you ever heard the term “progressive enhancement”? Many very prominent sites are using border-radius already. It’s idiots like you who are holding the progress of the web back.

  161. Really useful tutorial, simple and easy to use. I found it really useful. Thanks.

  162. Great article! I’m from Brazil, I’ve been following your works for a while and I’m always learning new things from you, congratulations.

  165. thanks for sharing this code
    but is there a fix to the height in firefox?
    Thanks you

  167. Wow! Those buttons looks cool! Thanks for sharing that!

    But… is that WC3 compliant? Is that a ‘valid’ code?

  168. This is a fantastic article – thanks! Going to start using these types of buttons right away :)

  169. Really useful tutorial, simple and easy to use. I found it really useful. Thanks.

  171. It seems the filter syntax breaks things in the new Explorer 9 beta. It gives the button/form button a solid background color + the rounded borders on top of it. The end result is as you can imagine not very nice. Any ideas on how to fix this? Thanks for a great site!

  173. I guess the alternative is to move the filter property to a IE8 only css with a conditional comment.

  174. Hey guys, this script is really amazing as you say. but didn’t you experience any height problem with firefox???
    i already asked that a month ago but had no answer. any tips???

  175. First, thank you for sharing your work, it’s very useful !

    Just a little detail I have added to your buttons for firefox :

    /* delete useless outline in firefox elements */
    button::-moz-focus-inner,
    input[type=”reset”]::-moz-focus-inner,
    input[type=”button”]::-moz-focus-inner,
    input[type=”submit”]::-moz-focus-inner,
    input[type=”file”] > input[type=”button”]::-moz-focus-inner {
    border: none;
    }

    With that, it will delete the dotted outline in firefox for the buttons/inputs elements.

    An other detail, I put a font-weight: 600; to be more readable in chrome because the text seems to be more aliased in chrome.

    Thank you !

  176. Thanks a lot for the useful info! The buttons look awesome. Cant wait to use them in our app

  178. hey Thomas, thanks for the tip to remove the useless outline in FF.
    don’t you have a height issue with FF???

  179. Great article! I’m from Brazil, I’ve been following your works for a while and I’m always learning new things from you, congratulations.

  180. Great article! I’m from Brazil, I’ve been following your works for a while and I’m always learning new things from you

  181. @Reda : No, I do not have any issue with FF. Which version do you use ? I’m currently with 3.6.10.

    Do you experience an issue on each html elements with a button css class or specific elements ?

  183. wow, my text has been cut because i put sime html tags:
    “Hi Thomas, and thanks a lot for your answer.
    I’m using FF 4 on a mac and all <button> elements have a much bigger height, i have no problem with <a> buttons.
    if you don’t see what i mean, i can send you a screen…
    Thanks once again”

  185. @Reda :

    Try this :

    button, .button,
    button[type=”button”], button[type=”reset”], button[type=”submit”],
    input[type=”reset”], input[type=”submit”], input[type=”button”] {
    display: inline-block;
    /* zoom and *display = ie7 hack for display:inline-block */
    zoom: 1;
    *display: inline;
    vertical-align: baseline;
    margin: 0px 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: 5px 13px 5px 13px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);

    border-width: 1px;
    border-style: solid;

    font-weight: 800;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    }

  187. hello everybody, it’s almost 2am in here and thought it would be better if i share with you what i have just discovered before i go to bed!
    to solve the FF height problem all you need to do is to add the following to .button class:
    font-family: your favorite font;
    font-size: Xpx;
    padding: 5px 10px;
    font-weight: bold;

    and then add this class:
    button::-moz-focus-inner {
    border: 0;
    }
    it’ll also solve many other problems caused by ie6&7 and also with FF such as a black border in ie7…
    hope this will help some of you and also spare you some time… ;)
    chears and thanks again for this nice script and also to Thomas who tried to help ;)

  188. These examples are definitely better then what I was going for and I will be utilizing them instead. These examples display the ‘box-shadow’ throughout. I am still trying to figure out if/how ‘box-shadow’ can be ‘activated’ when hovering over an element. Here is what I *was* going for:

    http://tinyurl.com/2aabwrp

    Thanks in advance.

  190. Has someone tried to get border radius in Internet Explorer? I’ve tried it with Curvycorners, but it doesn’t work… :-(

  191. Has anyone actually, been able to get a different colour for the “clicked” button, ie visited ?

  192. Excellent stuff guys. I’ve been looking for info on how to do this for a few days. You’ve explained it far better than anyone else I’ve found. Bookmarking the site.

  194. Thanks so much, Nick, for this tutorial and resource! The code works great and the buttons are beautiful. My clients are tickled, too! Much appreciated!!!

  195. I am currently using this technique on my website(in the nav) with some other effects.

  196. what a nice tutorial… easy to understand! :D thanks for sharing your knowledge :D

  197. Apple’s launch of the iphone 4 white has seen the greatest excitement for a new phone ever, with HD video recording, a super high-res screen and ridiculously slim dimensions, it’s not hard to see why its so popular in the world.

  198. I just want to say that I refer back to this all the time. Not only is it great for making buttons, but you have all the border, gradient, and drop-shadows laid out real nice. Its so convenient to come here, copy the text, paste, and then tweak. Thanks for putting all these rules in one spot like this!

  201. This works great in FF on my PC, but on my MAC, the Gradient does no apply? Am I missing something?

  203. Thank you soo much for this, I was pulling my hair out trying to this.
    Easy explanation and thanks for the code.
    Any idea how to add the when active state? if not many thanks anyway!
    :o)

  209. Brilliant tutorial and Ive now created as many buttons as there are on the demo page! Brilliant work around for the cross browser compatibility too! Thanks a bunch and now I shall do another tutorial!

  210. I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

  211. I think it also helps to use border-style: outset; the button and border-style: inset; for an active button. Makes it look more 3d.

  212. Preview

    The image below shows how the button will display in different browsers. In this image it would seem that the CSS3 does stand out a lot better then using the other browsers. It’s clearer to see and the finish is a lot better specially with the rounded corners it also stands out more then the rest.

  214. Its really nice to get buttons like this just by css. But its looks really bad in IE…
    is there any condition on doctype as well for it to work in internet explorer?

  216. For anyone looking to include an icon with the image, simply add a small bit of CSS for your images. Here’s what I used:

    .button img {vertical-align: bottom;}

    You can see a sample at this link. Hope that helps!

  217. This is great work, but i wish there was disable style on it too, lots of people miss out the disable version of the button, which is important too in dynamic sites, specially with ajax involvement. if you guys can add disable version, i would really appreciate it and other people with me.

  218. css3 like WordPress3.0 hit the unknown possibilities of their new. Thanx so much!!!

  219. Hello :) I love this technique and have been using it a lot, so thanks. I was just wondering if you’d looked at it in IE9. It seems to display the background gradient outside the rounded corners, so you have a rounded button within a rectangular button, if that makes sense. It’s hardly a huge deal, and it might be fixed pretty soon (hopefully!) but I was just wondering if you knew any ways around this? Cheers!

  220. IE9 release coming soon and the gradient peek a boo bug is still not fixed. You will need to use a png for IE9 and disable the filter using a conditional html comment. IE9’s filters have not been updated and probably never will, as more css3 features will hopefully be added in future versions. So much for being compliant since IE said that the radius css thye support is complete???

  222. Amazing!great examples. I am so glad that we can do nearly everything with css and reduce the amount of imgs. Thank you

  223. Great side – only looking this tut but think, all other tut’s great, too!
    Thx for your engagement and

    Greetings from Germany :-)

  224. Great site – only looking this tut but think, all other tut’s great, too!
    Thx for your engagement and

    Greetings from Germany :-)

  225. I like it, but I don’t think our designers will like having our styles down-grade. Good solution, but now now I must live in png land.

    1. There can still be a significant load time improvement by using CSS3 instead of images. Big time if you are not spriting(spelling is for people smarter than me) by avoiding another request, but even if you’ve got it in a sprite we’re still talking the difference between bytes and kilobytes. I still think there is a hefty benefit to using css3 where you can and falling back to images where necessary.

      p.s. You in S’toon?

  226. Quite disappointed again with Microsoft. The new IE9 doesn’t support css3 gradients and text-shadows, which are my favourite codes :(

  227. Quite disappointed again with Microsoft. The new IE9 doesn’t support css3 gradients and text-shadows, which are my favourite codes :(

    1. I’ve added support for IE9 with these buttons via SVG + IE9 conditional style block.

    2. My sentiments exactly. All the hullabaloo about “the same mark-up” and we’re still needing separate IE styles, separate IE conditionals and still wasting time trying to support IE.

      The bane of web development.

  228. Indeed a great way to learn how to put the CSS gradient feature in a good practical use.

  229. “The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.” Wow!

  231. This is super cool, but to create additional colors – for example brown or yellow ones – it would be interesting to know how you came up with the the color palette.

  233. Great tut, im wondering if the hover state is too heavy using the gradients, specially on IE ?

  237. Really impressive post, we will consider adding these functionality to our online button maker tool .

  239. Very nice! Where did you come up with the gradients? I need one with a different shade of blue. Thanks for the awesome work!

  240. Really nice work!

    Was excited until I previewed it in IE9 on Win7 :(
    Look flawless in Firefox 4 and Chrome 10 though :)

  244. Awesome! Thank you for making this tutorial available. These css buttons are exactly what I am looking for. Cheers, Chris.

  246. @Jacob V

    Hi all, what about the problem in IE9 (all button corners seems to be not transparent) ???

  248. Very useful! I’ll definitely use this for my website. Thank you!

  249. Hi,
    Thank you for the buttons, they are really cool. I have just one problem in that when I use the W3C CSS Level 3 Validator it brings up 56 errors and 1 warning, so can these be properly validated ?
    Thanks

  250. Thanks – these are great. Flipping IE9 gives a rounded border but doesn’t round the background colour to match. I’ve tried clipping the background but couldn’t get it to work. Anyone got a handy solution?

  254. Love all the CSS3 stuff I learn on here.
    I like the fact you show what they look like on non CSS3 browsers.
    Then you can decide whether to go ahead or not…

  256. Is there will be any delay if i use these gradient styles. I mean whether the browser will take bit more time to render the styles? Because i like it and need to use it . Thats why am asking this?

    Finally i like your site for the clean and simple design…

    Thanks,
    Sekar VK

  257. Are you “slow banning” IE6 the same site at the same time works great on Firefox but IE6 is keeps spinning the loading icon. If so, its not cool at all. You post some coll web design examples and want to view them in older browsers.

  258. Fabulous! Just what I was looking for.. very neatly explained… Great Work!!

  259. Great post, helped me a lot. However, it doesn’t work well in IE9. The gradient CSS command is creating square colored corners…

  263. you are amaizing i am njust a student for webmaster and graphic designer in the print….. and you help me so very much(sorry for the eanglish i am from israel)
    just had to say it:)

  269. Hi thanks for sharing this.. but there is a problem with radius in IE 9. gradient is visible outside radius. Any solution for that?

    2. If you move the final border-radius css rule to the bottom of .button then it works in IE9 as well. Guess it’s just the order in which they appear screws up IE…

  276. CORRECTION (it took my anchor tag and thought I was making a link): Love the buttons, BUT – when using a “button” tag the buttons become taller than with an “a” anchor tag. This problem even shows on the demo page. (FYI: I am using Firefox 5 but have had this problem since Firefox 3.6). Do you know how to fix this as it can be really off-putting when the two are right next to each other (one as a link, the other as part of a form)? Other than this small problem, these buttons are so cool and slick!

  277. Hi all,

    Love the buttons, but as stated unfortunately IE9 is played up. For anyone who’s interested, I added this in the .button class to remove the corners for IE – at least you don’t end up with dodgy corners.


    border-radius: .5em;
    <!–

    1. Urgh, that didn’t format right.

      Replace # with !.

      border-radius: .5em;<#–

      1. LOL, that doesn’t output either!

        Last attempt, otherwise just delete the comments.

        Reaplce LB with and # with !.

        LB#–[if #IE]RBLB#–RBborder-radius: .5em;LB#–LB#[endif]–RB

  278. Screw it, just use the if !IE syntax in CSS and remove the border-radius in the .button class.

  280. Hey there! I know you posted this over a year ago, but wow wow wow! I have been trying to update the various “button” type elements on our website and the amount of CSS I used was atrocious. Not to mention in Internet Exploder it looked like just a text link with space around it. Thank you for this post!

    Oh, and I’m thoroughly impressed. At least two (2) posts on each page of your blog has something I can use. You rock!

  282. Hello really Good Work am get & unique idea Your Best Tutorials Thx and GOD BLESS YOU Get Complete Tutorials
    on my website SEO Tips & web design Tips in Photoshop

  284. thanks much, I’ve been scouring the web for three days and had a few usable but clumsy solutions. This is great stuff, gonna make me look like I know what I am doing. Too many tutorials show things that don’t work that well or that you need to spend a lot of time refining. This works great right out of the box. thanks!

  285. I’m doing some buttons and wanted them to have a gradient background, and found your post really useful so thanks

  288. You can support even more browsers if you add their vendor-specific gradients:

    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
    background: -webkit-linear-gradient(top, #444, #000);
    background: -moz-linear-gradient(top, #444, #000);
    background: -ms-linear-gradient(top, #444, #000);
    background: -o-linear-gradient(top, #444, #000);
    background: linear-gradient(top, #444, #000);

  289. Also do NOT use RGBA() with text-shadow – unless you want your elements to look hideous in Chrome… just use a hex code for text-shadow instead.

  290. i got to you blog a project late, but still best thing i have see, just copy and past stuff no need to do any thing with out images. thanks a lot for sharing

  291. IMPORTANT: I just made this discovery last week, but if you put a space (yes, a space) AFTER “progid:” you will get beautiful buttons in IE9 as well!!!

    filter: progid: DXImageTransform[…]

    Cheers

    1. Unfortunately your just voiding the gradient and it’s falling back to the solid color… so your still not getting both border radius and background gradient.

    2. I definitely misspoke in this comment – my apologies to everyone in this thread – I should have come back and corrected myself once I discovered my error. You cannot use rounded corners and background gradients in IE9. You can sometimes use an inset shadow to achieve a similar effect.

  294. Thanks I always find this website helpful, whenever I get stuck in designing process.

    1. Unfortunately, it appears to work on small buttons, but you will notice that the entire gradient gets defeated. Try doing it on a large DIV… you will see that there is no gradient at all.

      The rule of thumb I now live by is to not use filter: progid:… with rounded corners… ever. Sometimes I will use an inset shadow to give the effect I am after.

      So sad that IE9 supports background gradients and rounded corners… but not both :(

  297. Hi,

    Anyhow it is not working on IE9 as IE9 does not support gradient effect and border-radius properties at the same time!
    I am working on this issue. I will get back to you if I found something.

    regards,
    Siddhesh

      1. The solution was alreadey in the comments:

        IMPORTANT: I just made this discovery last week, but if you put a space (yes, a space) AFTER “progid:” you will get beautiful buttons in IE9 as well!!!

        filter: progid: DXImageTransform[…]

        Cheers

  299. Hi, thanks for the code.

    Just created a plugin for wordpress to add your css buttons to wordpress websites. Need your mail to send you the zip file.

    cheers,
    serge

  303. Thanks for this information! At the same time I searched for this, I also came across CSS Pie (http://css3pie.com/) which addresses the extra features for Internet Explorer. I think I will try your solution first though, because I like understanding what goes on underneath. (And thanks for the people in the comments for pointing out the IE9 fix).

  306. Hi, I know you answered some questions about the IE problem, but I still cannot get this to work on IE. I am quite a newbie about CSS, so if you excuse my maybe silly question: I added the space like this: filter:progid: DXImageTransform.Microsoft.gradient(startColorstr=’#ed1c24′, endColorstr=’#aa1317′);

    But IE still doesn;t show the color of the button, it’s just rectangular and white

  308. Great Stuff! Thanks so much as I was having problems with CSS3 buttons in IE8, but this fixed it. However, I did have a question as I’m a newbie to all this stuff. I have a lightbox that pops out once a button is clicked. Here’s the code using my previous button: Button

    I can’t get the lightbox to work with this button’s code because it uses the “class=” as well. Is there a work around or simple line of code that I’m missing? Any help would be appreciated!

    1. as I said, I’m a newbie and put complete code into the post, but I’ll give it one more shot:
      a target=”_blank” href=”https://clc.ccbchurch.com/w_form_response.php?form_id=24&tab=nw&lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=760″ class=”lightbox”>Online Connection Card</a

  310. Hi! i’m using thesis theme and i don’t know where to put the code you gave is it for custom.css? please reply!

  311. Hi Nick,

    Love the buttons! I have a question: given a base color, how do you get the rest of the colors (border-color, gradient colors, etc)? Are the rest of the colors the base color with the brightness changed?

    -Venkat

  312. these are really good by Anas Ali
    web designer at
    Ahead

    Creations web designing company in delhi India

  313. freelance web designer and developer from Malaysia | cheap Web Designing.Offers bunch of creative services – custom web design (layout, applications, CMS, CSS), e-commerce, graphic design, creative copywriting, corporate identity, logo design,interactive marketing and more…

  314. Hi,
    I have a question i have the code but when i put it into my css how do i name it so i can link it to a div in html.
    Like normally i would do for example in my css — “#navagation { (and then the code);}”
    and i would link it to my html code like for example–” “

  315. Hi,
    I Really like this code! :) but
    I have a question i have the code but when i put it into my css how do i name it so i can link it to a div in html.
    Like normally i would do for example in my css — “#navagation { (and then the code);}”
    and i would link it to my html code like for example–” “

  318. How can i rearrange the buttons so that the are vertical rather than horizontal.

    thanks Amanda

  321. Hey, this is probably the best CSS3 button tutorial I’ve seen in a while. Good work!

  323. Very nice buttons, although in IE9 the gradient goes right up to the corners yet there is a rounded border radius inside of that which looks a little untidy…. i’m trying to fix it, any ideas ?

    1. Me too, looks ok with the colours I’m using but would be ideal to get them rounded!

    1. Hi Tammy
      Just been to your site to see your buttons and was impressed :-)
      How do you get that lovely central bit that separates from the background?
      I’d love to do that to some of my pages [just learning web design]
      Many thanks

  325. Nice example on creating a very catchy CSS 3 button. I was working on a project and needed something cool to make it stand out and your examples here have definitely saved the day.

    Great job.

  326. A very good tutorial. Another thing to note, if anyone is interested, is that you can add multiple box-shadow’s. You can use the inset feature to give a good internal shadow, or give your buttons a bevel effect. Something like this:
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2),inset 1px 1px 1px rgba(255,255,255,.3);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2),inset 1px 1px 1px rgba(255,255,255,.3);
    box-shadow: 0 1px 2px rgba(0,0,0,.2),inset 1px 1px 1px rgba(255,255,255,.3);

    And regarding the IE gradient, it overlaps the border radius. So definitely impractical to use on elements with rounded borders. Maybe there’s a fix somwhere :D

  327. Hi, Can I use this code to use as an input button for a form?
    If so, How would I add this to the code below.

    Thanks

  328. Excellent tutorial! Thanks a bunch! I am going to be using these buttons in my company’s website!

  330. is there a way to embed a picture inside the button instead of text?

  334. Thank you very much for your teaching material, is very useful to me really appreciate it

  336. Thank you very much, easily one of the best tutorials on CSS buttons out there!

  338. Lots of code for something so simple. I still think images are faster than writing all that code. Hopefully they will make the css easier to write in the future.

    1. Um…no, they are not faster…and, not a lot of code…why use an image when you can use CSS3?

  339. Do you have any fix for rounded corners and gradient filter edges bleeding in IE9? I’ve tried adding a containing element and setting the overflow to hidden, but it doesn’t correctly apply a mask to the buttons.

  341. Wow!!! Great Css, i was looking for it. I will use it in my current website.

    thanks.

  343. I’m taking a web course this semester and would LOVE to go to this conference to learn more. I’m totally inspired by Sarah Parmenter’s website and I really would appreciate going to hear her talk

  345. Brilliant, thanks for taking the time and effort to write your blog and explanations. I will sort this on my site tomorrow. Nice one.

  347. Thanks. I’m looking for CSS buttons that draw with a glass look to them. Any suggestions?

  349. IE 9 fix change border radius width to 8px rather than 0.5em

    1. -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;

      Like that ? It does’nt work…

  350. Really a best website for the web designers. I am really interested to create css button..So i will learn it

  353. Thanks for your help, trying hard, here is a yellow code for people to try out:

    /* Yellow */
    .yellow {
    color: #010101;
    border: solid 1px #E7EE61;
    background: #F1FD03;
    background: -webkit-gradient(linear, left top, left bottom, from(#D2D20F), to(#EFF372));
    background: -moz-linear-gradient(top, #D2D20F, #EFF372);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#D2D20F’, endColorstr=’#EFF372′);
    }
    .yellow:hover {
    background: #D1DA1A;
    background: -webkit-gradient(linear, left top, left bottom, from(#F6F5AC), to(#D2CB33));
    background: -moz-linear-gradient(top, #F6F5AC, #D2CB33);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#F6F5AC’, endColorstr=’#D2CB33′);
    }
    .yellow:active {
    color: #EFF75E;
    background: -webkit-gradient(linear, left top, left bottom, from(#EFF372), to(#FFFFB3));
    background: -moz-linear-gradient(top, #EFF372, #FFFFB3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#EFF372′, endColorstr=’#FFFFB3′);
    }

    Regards

  358. Beautiful! Thanks!
    Only one different button color in my ul/li does not work, how do i solve that…

  361. My problem ist, that I have a standard a:link with dark blue color definition that I want to override within these buttons, but it does not work. I would like to have white or yellow as link color in .blue, but until now nothing seemed to work and I got some strange results. Could you change the code so that color codes that are given in .color override the set general link color?

    Regards
    Thomas

  362. it does not look the same in IE (6.0+) , round corners are lost and there is no gradient color as it may appear in Chrome and Firefox … !!!

Comments are closed on this article.